// 一级 CSS 变量：基础效果变量

:root {
  
  /* ========== 尺寸系统 ========== */
  // 间距
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;
  
  // 圆角
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 12px;
  --radius-full: 9999px;

  // 阴影
  --shadow-sm: 0px 2px 6px rgba(0, 0, 0, 0.1); // 悬浮等的交互阴影
  --shadow-md: 0px 4px 12px rgba(0, 0, 0, 0.15); // 下拉菜单、选择器等浮层阴影
  --shadow-lg: 0px 12px 32px rgba(0, 0, 0, 0.1), 0px 8px 16px rgba(0, 0, 0, 0.05); // 模态框等大型浮层阴影

  /* ========== 字体系统 ========== */
  --font-family-sans: "Helvetica Neue", Arial, "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  --font-family-mono: 'Menlo', 'Liberation Mono', 'Consolas', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
  
  // 字体大小
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  
  // 行高
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  
  // 字重
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  
  /* ========== 边框系统 ========== */
  // 边框宽度
  --border-width-0: 0px;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --border-width-8: 8px;
  
  /* ========== 高度尺寸 ========== */
  // 组件高度
  --height-toolbar: 48px; // 不得更改，用于动态计算多行的工具栏高度
  --height-button: 38px;
  
  /* ========== 透明度 ========== */
  --opacity-0: 0;
  --opacity-25: 0.25;
  --opacity-50: 0.5;
  --opacity-75: 0.75;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;
  
  /* ========== 毛玻璃效果 ========== */
  // 毛玻璃模糊度
  --blur-none: 0;
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 12px;
  --blur-xl: 16px;
  --blur-2xl: 24px;
  --blur-3xl: 40px;
  
  // 毛玻璃背景色
  --glass-bg-white: rgba(255, 255, 255, 0.8);
  --glass-bg-gray: rgba(248, 250, 252, 0.8);
  --glass-bg-dark: rgba(51, 65, 85, 0.8);
  --glass-bg-black: rgba(0, 0, 0, 0.8);

  // 毛玻璃边框
  --glass-border-light: rgba(255, 255, 255, 0.2);
  --glass-border-dark: rgba(255, 255, 255, 0.1);

  /* ========== Z-index 层级 ========== */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
}
